<template>
	<view class="bodyClass">
		<view class="card">
			<view class="line">
				<view class="img">

				</view>
				<view class="">
					<view class="">
						{{list.status ==1?$t('order.pending'):list.status ==2?$t('order.confirm'):list.status ==3?$t('order.complete'):list.status ==4?$t('order.unfinished'):$t('order.under.review')}}
					</view>
					<view class="num">
						{{list.status ==1?$t('order.order.pending'):list.status ==2?$t('order.order.confirm'):list.status ==3?$t('order.order.complete'):list.status ==4?$t('order.order.unfinished'):$t('order.review')}}
					</view>
				</view>
			</view>
		</view>

		<view class="info">
			<view class="info_box">
				<view class="image">
					<img :src="list.img" alt="" style="width: 100%;height: 100%;" />
				</view>
				<view class="title">

					<view class="name">{{list.productName}}</view>
					<view class="price">{{list.price}}</view>
				</view>
			</view>
			<view class="actually">
				<view class="">实付:</view>
				<view class="price">{{list.price}}</view>
			</view>
		</view>

		<view class="card_detail">
			<span style="font-weight: bold;">{{$t('order.detail')}}</span>
			<view class="txt_btn">
				<view class="tit" style="width: 77%;">
					<view class="txt_left">{{$t('order.no')}}:</view>
					<view class="" style="word-break: break-all;width: 70%;">{{list.orderNo}}</view>
				</view>
				<view style="display: flex;justify-content: flex-end;">
					
				
				<button type="primary" size="mini" id="order" @click="copy">{{$t('public.copy-button')}}</button>
				</view>
			</view>

			<view class="tit">
				<view class="txt_left">{{$t('order.place-data')}}:</view>
				<view class="">{{list.failureTime}}</view>
			</view>
			<!-- <view class="tit">
				<view class="txt_left">1313</view>
				<view class="">12312313</view>
			</view> -->
		</view>

		<view class="">
			<u-upload :header="header" :action="action" max-count="3" :file-list="fileList" name="multipart" @on-success='handSuccess' :upload-text='uploadText' :show-tips="false"  @remove="deleteItem"></u-upload>
		</view>

		<view class="bottom">
			<!-- <view class="bottom_btn">
				<button type="primary" class="btn">联系客服</button>
				<button type="warn" class="btn">删除订单</button>
			</view> -->
			<view class="bottom_btn">
				<button type="primary" class="btn" @click="upload">{{$t('order.upload-voucher')}}</button>
				<button type="warn" class="btn" @click="pay">{{$t('public.payment')}}</button>
			</view>
		</view>

		<view class="bg" v-if="isShowCard"></view>
		<view class="showCard" v-if="isShowCard">
			<u-card :title="$t('order.pay.info')">
				<view class="" slot="body" >

					<view class="u-body-item   u-border-bottom  u-p-t-0" style="height: 350px;overflow: auto">

						<view class="" v-for="item in addressList">

							<view class="prompt">{{$t('account.network')}} :{{item.network}}</view>
							<view class="prompt">{{$t('account.network-addr')}} :{{item.walletAddress}}</view>
							<view class="prompt">{{$t('user.phone')}} :{{item.phone}}</view>
							<view class="prompt">{{$t('user.email')}} :{{item.mail}}</view>
							<!-- <view class="prompt" v-if="item.updateTime">时间 :{{item.updateTime}}</view> -->
							<view class="shop_detail" style="display: flex;padding: 10px 5px;">
								<view class="shopImg" style="width: 50px;height: 50px;margin-right: 5px;">
									<image :src="item.qrcodeUrl" alt="" style="width: 100%;height: 100%;" />
								</view>
								<view class="rightTit"
									style="display: flex;flex-direction: column;justify-content: space-between">
									<view class="">
										{{item.productName}}
									</view>
									<view class="">
										{{item.price}}
									</view>
								</view>
							</view>

						</view>

					</view>
				</view>
				
				<view class="" style="height: 70px;"></view>
				
				<view class="foot_btn" slot="foot" style="display: flex;justify-content: space-around;">
					<button @click="back" type="default"
						style="border: 1px solid #ccc;width: 90px;height: 40px;line-height: 40px;"
						class="btn_confirm">{{$t('public.return')}}</button>
					<button type="primary" class="btn_confirm" @click="back"
						style="width: 90px;height: 40px;line-height: 40px;">{{$t('public.confirm')}}</button>
					<!-- <button v-else type="primary" class="btn_confirm" @click="goLook">去查看</button> -->
				</view>
			</u-card>
		</view>

	</view>
</template>

<script>
	import {
		OrderInfo,
		orderDetail,
		imageReview,
		OrderDetail,
		OrderBuyIn,
		userUpload
	} from '@/api/new.js'
	import {
		HTTP_ADMIN_URL,
		TOKENNAME
	} from '@/config/app.js';
	import store from '@/store';
	export default {
		data() {
			return {
				uploadText:this.$t('order.pay.select'),
				shopInfo: '',
				info: "",
				list: {},
				isShowCard: false,
				action: HTTP_ADMIN_URL + '/api/front/userAuthCollectionUpload',
				header: {
					
					// "Content-Type": "multipart/form-data",
				
					[TOKENNAME]: store.state.app.token
				},
				fileList: [],
				listImg: [],
				addressList: [],
				result:''
			}
		},
		onLoad(e) {
			this.shopInfo = e.orderInfo
			console.log(e);



			this.getInfo(e)

		},
		methods: {
			deleteItem(index,lists){
				this.listImg.splice(index,1)
				// console.log(index,lists,'index,lists',this.fileList);
			},
			handSuccess(data,index, lists, name){
				this.listImg = lists
				let str = ''
				console.log(this.listImg,'lists',name);
				for(let i = 0;i<lists.length;i++){
					str += lists[i].response.data.url + ','
					
				}
				this.result = str.slice(0,-1)
				// this.result data.data.url
				console.log(this.result,'strstrstrstr');
				
			},
			beforeUpload(index, list) {
				console.log(index, list, 'beforeUpload');
				this.listImg = list
			},
			
			back() {
				this.isShowCard = false
				// uni.redirectTo({
				// 	url:'/pages/auction/auction_seckill/auction'
				// })
			},
			pay() {
				let id = this.list.id
				console.log(id, 'idddddddddd');
				// this.modal = true
				// this.addressList = this.fileList[0]
				OrderDetail(id).then(res => {
					console.log(res, 'OrderDetail');
					if (res.data) {
						this.isShowCard = true
						this.addressList = res.data
					}
				}).catch(err => {
					this.$util.Tips({
						title: err
					});
				})
			},

			getInfo(e) {
				let ch = uni.getStorageSync('AppLocale').code
				OrderBuyIn(e.orderInfo).then(res => {
					console.log(res, 'res');
					if (res.code == 200) {
						// this.list = res.data
						
						let obj  = res.data
						
						if (obj.productName.includes('|')) {
							if (ch == "en") {
								obj.productName = obj.productName.split('|')[0]
							} else {
								obj.productName = obj.productName.split('|')[1]
							}
							
						}
						this.list = obj
						
						
					}

				}).catch(err => {
					this.$util.Tips({
						title: err
					});
				})

			},
			copy() {
				let that = this
				uni.setClipboardData({
					data: that.list.orderNo,
					success() {
						that.$util.Tips({
							title: this.$t("public.tips.copy")
						})
					}
				})


			},
			upload() {
				// this.show = true
				let that = this;
				// that.$util.uploadImageOne({
				// 	url: 'userAuthCollectionUpload',
				// 	count: 3,
				// 	name: 'multipart',
				// 	model: "maintain",
				// 	pid: 0
				// }, function(res) {
				// 	// that.newAvatar = res.data.url;
				// 	console.log(res, '!!!!!');
				// 	let data = {
				// 		imageUrl: res.data.url,
				// 		userPayStoreId: that.list.id
				// 	}
				// 	});
					// console.log(data, 'data');
				if(this.listImg.length!==''&& this.listImg.length>0){
						let data = {
							imageUrl: that.result,
							userPayStoreId: that.list.id
						}
					   // result +=",".join(this.listImg[i].file)
						imageReview(data).then(res => {
							
								console.log(res, '????????');
								that.$util.Tips({
									title: that.$t('order.upload.success')
								});
						
								setTimeout(() => {
									uni.navigateBack()
								}, 1000)
						
								this.waitpick = false
								// this.getList()
							})
							.catch(res => {
								that.$util.Tips({
									title: that.$t('auctionTips.2007')
								});
							});
					
					}else{
								that.$util.Tips({
									title: that.$t('pleaseUploadImg')
								});
					}
					
					// console.log(result,'result');
					// imageReview(data).then(res => {
					// 		console.log(res, '????????');
					// 		that.$util.Tips({
					// 			title: res.data.msg
					// 		});

					// 		setTimeout(() => {
					// 			uni.navigateBack()
					// 		}, 1000)

					// 		// this.waitpick = false
					// 		// this.getList()
					// 	})
					// 	.catch(res => {
					// 		that.$util.Tips({
					// 			title: res
					// 		});
					// 	});
						

			},
			detail(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style scoped lang='scss'>
	.uni-app--maxwidth {
		position: relative;

	}

	.bg {
		position: absolute;
		top: 0;
		height: 100vh;
		width: 100%;
		z-index: 2;
		background-color: #000;
		opacity: 0.7;
	}

	.showCard {
		position: absolute;
		top: 43%;
		transform: translate(0, -50%);
		width: 100%;
		z-index: 3;
	}

	.upload_tit {
		text-align: center;
		margin: 10px 0;
		font-size: 18px;
		padding: 10px 0;
		border-bottom: 1px solid #ccc;
		font-weight: bold;
	}

	.upload_Box {
		padding: 10px;
		display: flex;
	}

	::v-deep uni-modal .uni-modal {
		z-index: 99999999 !important;
	}

	.bottom {

		position: absolute;
		bottom: 0;
		display: flex;
		/* height: 50px; */
		padding: 15px 0;
		width: 100%;
		background: #fff;
	}

	.bottom_btn {
		display: flex;
		justify-content: flex-end;
		width: 100%;
		padding: 0 10px;
		height: 30px;

		.btn {
			height: 35px;
			padding: 5px 10px;
			margin-left: 15px;
		}
	}

	.txt_left {
		margin-right: 5px;
	}

	.txt_btn {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.actually {
		display: flex;
		justify-content: flex-end;
	}

	.title {
		display: flex;
		justify-content: space-between;
		margin-left: 10px;
		flex: 1
	}

	.name {
		font-weight: 700;
		font-size: 19px
	}

	.price {
		color: #d9001b;
		font-weight: 700;
		font-size: 19px
	}

	.image {
		height: 120px;
		width: 120px;
		/* background: aqua; */

	}

	.info {
		margin: 10px;
		padding: 10px 16px;
		background-color: #fff;
		border-radius: 8px;
		/* height: 250px; */
		display: flex;
		flex-direction: column;
		justify-content: space-around
	}

	.info_box {
		display: flex;
		justify-content: space-between;
		flex: 1
	}

	.img {
		/* background-color: aqua; */
		width: 56px;
		height: 40px;
		margin-right: 10px;
	}

	.card {
		margin: 5px 10px;
		padding: 0 16px;
		background-color: #fff;
		border-radius: 8px;
	}

	.line {
		padding: 10px;
		display: flex;

	}

	.num {
		font-weight: bold;
	}

	.card_detail {
		margin: 15px 10px;
		padding: 10px 10px;
		/* height: 200px; */
		background-color: #fff;
		border-radius: 8px;
	}

	.tit {
		display: flex;
		/* justify-content: space-between; */
		margin: 10px 0;
		align-items: center;

	}
</style>